<template>
  <div class="pagination">
    <!-- <h2>“start”：{{starNumAndEndNum.start}}--“end”：{{starNumAndEndNum.end}}--当前页码：{{pageNo}}</h2> -->
    <button :disabled="pageNo == 1" @click="$emit('getPageNo', pageNo - 1)">
      上一页
    </button>
    <button
      v-if="starNumAndEndNum.start > 2"
      @click="$emit('getPageNo', 1)"
      :class="{ active: pageNo == 1 }"
    >
      1
    </button>
    <button v-if="starNumAndEndNum.start > 2">···</button>
    <!-- 遍历数字结束页数，会从1开始   v-if 判断 取 从当前页开始到结束页  -->
    <button
      v-for="(page, index) in starNumAndEndNum.end" :key="index"
      v-if="page>=starNumAndEndNum.start" @click="$emit('getPageNo', page)"
      :class="{ active: pageNo == page }">
      {{ page }}
    </button>

    <button v-if="starNumAndEndNum.end < totalPage - 1">···</button>
    <button
      v-if="starNumAndEndNum.end < totalPage - 1"
      @click="$emit('getPageNo', totalPage)"
      :class="{ active: pageNo == totalPage }"
    >
      {{ totalPage }}
    </button>
    <button
      :disabled="pageNo == totalPage"
      @click="$emit('getPageNo', pageNo + 1)"
    >
      下一页
    </button>

    <button style="margin-left: 30px">共{{ total }}条</button>
  </div>
</template>

<script>
export default {
  name: "Pagination",
  //     当前页  每页多少条数据  总共有多少条数据  连续分页数
  props: ["pageNo", "pageSize", "total", "contiunes"],
  computed: {
    //总页数
    totalPage() {
      // Math.ceil向上取整
      //总的页数除去要展示的数据，就得出总的页数
      return Math.ceil(this.total / this.pageSize);
    },
    //连续的开始和结束的页数
    starNumAndEndNum() {
      //保存父组件传来的数据
      //  连续分页页数 当前所在页  总页
      const { contiunes, pageNo, totalPage } = this;
      //定义存储起始和结束页数
      let start = 0,
        end = 0;
      //总页不足5页
      //如果连续分页数 大于 总页数
      if (contiunes > totalPage) {
        //让开始页是
        start = 1;
        //让结束页是总页：总页 4，连续分页结束页 4
        end = totalPage;
      } else {
        // 总页够5页
        // parseInt取整
        //当前所在页8 减去 取整后的连续分页数 除二  得6 就是开始页数
        //开始页数
        start = pageNo - parseInt(contiunes / 2);
        //当前所在页 加 取整后的连续分页数 除二
        //结束页数
        end = pageNo + parseInt(contiunes / 2);
        //start起始页为0|负数
        if (start < 1) {
          start = 1;
          //结束页 等于 连续分页
          end = contiunes; //5
        }
        //end结束页大于总页数
        if (end > totalPage) {
          //结束页 等于 总页
          end = totalPage; //50
          //总页 减 连续分页-1
          start = totalPage - contiunes + 1; // 1
        }
      }
      return { start, end };
    },
  },
};
</script>

<style lang="less" scoped>
.pagination {
  text-align: center;
  button {
    margin: 0 5px;
    background-color: #f4f4f5;
    color: #606266;
    outline: none;
    border-radius: 2px;
    padding: 0 4px;
    vertical-align: top;
    display: inline-block;
    font-size: 13px;
    min-width: 35.5px;
    height: 28px;
    line-height: 28px;
    cursor: pointer;
    box-sizing: border-box;
    text-align: center;
    border: 0;

    &[disabled] {
      color: #c0c4cc;
      cursor: not-allowed;
    }

    &.active {
      cursor: not-allowed;
      background-color: rgba(255, 0, 0, 0.7);
      color: #fff;
    }
  }
}
</style>